<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>场景出图</title>
    <link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="./Build/Cesium/Cesium.js"></script>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div id='tool' style="position: absolute;left: 5px;top: 5px;">
        <div>
            <input type="button" id="custom" value="场景出图" class="button black">
        </div>
    </div>
    <script type="text/javascript">
        function onload(Cesium) {
            var viewer = new Cesium.Viewer('cesiumContainer');
            viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                url: 'https://dev.virtualearth.net',
                mapStyle: Cesium.BingMapsStyle.AERIAL,
                key: URL_CONFIG.BING_MAP_KEY
            }));
            var scene = viewer.scene;
            scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
            scene.shadowMap.darkness = 1.275;
            scene.skyAtmosphere.brightnessShift = 0.4;
            scene.debugShowFramesPerSecond = true;
            scene.hdrEnabled = false;
            var widget = viewer.cesiumWidget;
            try {
                var promise = scene.open(URL_CONFIG.SCENE_NIAOCHAO);
                Cesium.when(promise, function (layers) {
                    scene.camera.setView({
                        destination: new Cesium.Cartesian3.fromDegrees(116.38621009526075, 39.98468016277832, 313.2286367219722),
                        orientation: {
                            heading: 6.116051,
                            pitch: -0.275007,
                            roll: 6.283185
                        }
                    });
                    $("#custom").on("click", function () {
                        var promise = scene.outputSceneToFile();
                        Cesium.when(promise, function (base64data) {
                            download(base64data);
                        })
                    })
                }, function () {
                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                    widget.showErrorPanel(title, undefined, e);
                });
            }
            catch (e) {
                if (widget._showRenderLoopErrors) {
                    var title = '渲染时发生错误，已停止渲染。';
                    widget.showErrorPanel(title, undefined, e);
                }
            }
        }
        /**
         * 根据图片生成画布
         */
        function convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            return canvas;
        }
        /**
         * 下载图片
         */
        function download(base64data) {
            var image = new Image();
            image.src = base64data;
            image.onload = function () {
                var canvas = convertImageToCanvas(image);
                url = canvas.toDataURL("image/jpeg");
                var a = document.createElement('a');
                var event = new MouseEvent('click');
                a.download = (new Date()).getTime() + ".jpg"; // 指定下载图片的名称
                a.href = url;
                a.dispatchEvent(event); // 触发超链接的点击事件
            }
        }
        if (typeof Cesium !== 'undefined') {
            window.startupCalled = true;
            onload(Cesium);
        }
    </script>
</body>

</html>